<template>
  <el-row>
    <el-col :span="10"><div class="data_list">
      <el-card class="list-card">
        <div class="Registration_code">
          <p class="box_code">箱子唯一码</p>
          <el-input
              class="box_input"
              placeholder="请输入或扫码"
              suffix-icon="el-icon-saoma"
              v-model="box_input">
          </el-input>
          <el-button type="primary" class="dev_button" @click="get_box_and_instock">确定</el-button>
        </div>
        <div class="list">
          <el-descriptions class="des" :columns="2" size="mini" v-loading="loading1">
            <el-descriptions-item label="设备编码" span="3">{{this.boxdetail.devCode}}</el-descriptions-item>
            <el-descriptions-item label="箱子编号" span="3">{{this.boxdetail.boxCode}}</el-descriptions-item>
            <el-descriptions-item label="箱子类型" span="3">{{ this.boxdetail.devTypename }}</el-descriptions-item>
            <el-descriptions-item label="容量" span="3">{{this.boxdetail.nowCapacity}}/{{this.boxdetail.boxCapacity}}</el-descriptions-item>
            <el-descriptions-item label="创建时间" span="3">{{this.boxdetail.createTime}}</el-descriptions-item>
            <el-descriptions-item label="备注" span="3">{{this.boxdetail.description}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="Device_code">
          <p class="dev_code">设备唯一码</p>
          <el-input
              class="dev_input"
              placeholder="请输入或扫码"
              suffix-icon="el-icon-saoma"
              v-model="device_input">
          </el-input>
          <el-button type="primary" class="dev_button" @click="input_device">入库</el-button>
        </div>
      </el-card>
      <el-card class="table_data" style="margin-top: 20px;height: auto">
        <h3 class="device_head"></h3>
        <el-table :data="tableData" style="width: 100%"  highlight-current-row height="400px"
                  @current-change="handleCurrentChange" v-loading="loading2">
          <el-table-column v-for="(val, key) in tableLabel" :prop="key" :label="val" :key="key" :show-overflow-tooltip="true"/>
        </el-table>
      </el-card>
    </div></el-col>
    <el-col :span="14"><div class="data_detail">
      <el-card class="choose-card" style="margin-left: 20px;height:auto">
        <el-empty v-if="!showDetail" description="暂无设备信息" style="height: 800px">
          <template #image>
            <div class="custom-empty-content">
              <img src="https://img2.imgtp.com/2024/04/03/fhG64MFW.png" class="custom-image">
            </div>
          </template>
        </el-empty>
        <!-- 显示详细信息 -->
        <div v-else>
          <!-- 在这里放置详细信息内容 -->
          <div class="head">
            <h3 class="title"></h3>
          </div>
          <div class="detail">
            <el-descriptions class="dt" :columns="2" size="mini" v-loading="loading3">
              <el-descriptions-item label="设备名称" span="2">
                {{ device_detail.devType }}
                <el-tag
                    size="small"
                    :type="getTagType(parseInt(device_detail.devState))"
                    class="dt_tag">
                  {{ getTagLabel(parseInt(device_detail.devState)) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="设备唯一码" span="2">{{ device_detail.devGuid }}</el-descriptions-item>
              <el-descriptions-item label="工单号" span="2">
                {{ device_detail.workOrderCode }}
                <i class="el-icon-list" @click="openMessageBox" style="color:#165DFF "></i>
              </el-descriptions-item>
              <el-descriptions-item label="箱子编号" span="2">
                {{ device_detail.boxCode }}
                <i class="el-icon-list"></i>
              </el-descriptions-item>
              <el-descriptions-item label="销售单号" span="2">
                {{ device_detail.saleCode }}
                <i class="el-icon-list"></i>
              </el-descriptions-item>
              <el-descriptions-item label="产品序列号" span="2">{{ device_detail.devSerialNumber }}</el-descriptions-item>
              <el-descriptions-item label="机型代码" span="2">{{ device_detail.devCode }}</el-descriptions-item>
              <el-descriptions-item label="硬件信息" span="2">{{ device_detail.devHardware }}</el-descriptions-item>
              <el-descriptions-item label="生产时间" span="2">{{ device_detail.mfgTime }}</el-descriptions-item>
              <el-descriptions-item label="核心模块版本" span="2">{{ device_detail.devSoftware1 }}</el-descriptions-item>
              <el-descriptions-item label="客户名称" span="2">{{ device_detail.client }}</el-descriptions-item>
              <el-descriptions-item label="报警模块版本" span="2">{{ device_detail.devSoftware2 }}</el-descriptions-item>
              <el-descriptions-item label="操作员" span="2">{{ device_detail.user }}</el-descriptions-item>
            </el-descriptions>
            <el-dialog :visible.sync="dialogVisible" title="工单信息" width="50%">
              <el-form ref="form" :model="formData" label-width="100px">
                <el-form-item label="工单号">
                  <el-input v-model="formData.workOrder" placeholder="请输入工单号" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="经办人">
                  <el-input v-model="formData.operator" placeholder="请输入经办人" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="生产数量">
                  <el-input v-model="formData.productionQuantity" placeholder="请输入生产数量" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="已生产量">
                  <el-input v-model="formData.haveQuantity" placeholder="请输入已生产量" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="实际开工日">
                  <el-input v-model="formData.startTime" placeholder="请输入实际开工日" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="实际完工日">
                  <el-input v-model="formData.endTime" placeholder="请输入实际完工日" :disabled="true"></el-input>
                </el-form-item>
                <!-- 这里可以继续添加其他输入框 -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
              </div>
            </el-dialog>
          </div>
          <div class="tabs">
            <el-tabs v-model="activeName">
              <el-tab-pane name="first" label="入库记录">
                <el-table :data="instock_list" style="width: 100%" max-height="500px">
                  <el-table-column v-for="(val, key) in instock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)"/>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="出库记录" name="second">
                <el-table :data="outstock_list" style="width: 100%" max-height="500px" >
                  <el-table-column v-for="(val, key) in outstock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)"/>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="退货记录" name="third">
                <el-table :data="retstock_list" style="width: 100%" max-height="500px">
                  <el-table-column v-for="(val, key) in retstock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)"/>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="维修记录" name="fourth">
                <el-table :data="fixTable" style="width: 100%" max-height="500px">
                  <el-table-column v-for="(val, key) in fixLabel" :prop="key" :label="val" :key="key" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="返工记录" name="fifth">
                <el-table :data="reworkTable" style="width: 100%" max-height="500px">
                  <el-table-column v-for="(val, key) in reworkLabel" :prop="key" :label="val" :key="key" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-card>
    </div></el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      token:'',
      activeName:'first',
      showDetail: false, // 是否显示详细信息，默认为 false
      dialogVisible: false,
      box_input:'',
      device_input:'',
      boxdetail:{
        devCode:'',
        boxCode:'',
        boxId:'',
        devTypename:'',
        boxCapacity:0,
        createTime:'',
        description:'',
        nowCapacity:0
      },
      tableData:[],
      device_detail:{
        devType:'',
        devGuid:'',
        workOrderCode:'',
        boxCode:'',
        devSerialNumber:'',
        devCode:'',
        devHardware:'',
        mfgTime:'',
        devSoftware1:'',
        devSoftware2:'',
        client:'',
        user:'',
        devState:'',
        saleCode:''
      },
      tableLabel: {
        index: "序号",
        code: "机器代码",
        device: "设备唯一码",
        time: "入库时间",
        worker: "操作员"
      },
      instock_list: [], // 入库列表数据
      instock_label: {
        index: "序号",
        devCode: "机型代码",
        boxCode: "箱子编号",
        time: "入库时间",
        worker: "操作员"
      },
      outstock_list:[],
      outstock_label: {
        index: "序号",
        client: "客户名称",
        outstockTime: "出库时间",
        worker: "操作员"
      },
      retstock_list:[],
      retstock_label:{
        index: "序号",
        reason: "退货原因",
        time: "退货时间",
        worker: "操作员",
        description: "备注"
      },
      fixTable:[
        {
          index:1,
          c_device:"63123456701234",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"听筒喇叭无声,并存在电流",
          solution:"-",
          time:"2024-03-14 18:30",
        },
        {
          index:2,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"无法正常提醒",
          solution:"-",
          time:"2024-03-14 18:30"
        },
        {
          index:3,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"通讯故障",
          solution:"-",
          time:"2024-03-14 18:30"
        },
        {
          index:4,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"未知",
          solution:"-",
          time:"2024-03-14 18:30"
        },
        {
          index:5,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"按钮失灵",
          solution:"-",
          time:"2024-03-14 18:30"
        }
      ],
      fixLabel: {
        index: "序号",
        c_device: "更换设备唯一码",
        c_message: "修改硬件信息",
        c_h_version: "变更核心模块版本",
        c_b_version: "变更报警模块版本",
        content: "故障内容",
        solution: "解决方案",
        time: "维修时间"
      },
      reworkTable:[
        {
          index:1,
          c_device:"63123456701234",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"听筒喇叭无声",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:2,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"无法正常提醒",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:3,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:4,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:5,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
        },
        {
          index:6,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:7,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        }
      ],
      reworkLabel: {
        index: "序号",
        c_device: "更换设备唯一码",
        c_message: "修改硬件信息",
        c_h_version: "变更核心模块版本",
        c_b_version:"变更报警模块版本",
        content: "返工内容",
        time: "返工时间",
        worker: "操作员",
        description: "备注"
      },
      formData: {
        workOrder: 'GD2024030100001',
        operator: '张三',
        productionQuantity: '200',
        haveQuantity:'200',
        startTime: '2024-03-14',
        endTime: '2023-03-16',
        // 在这里可以添加其他字段
      }
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.showDetail = true;
      const devId = val.devId;
      this.fetchDetailInfo(devId);
    },
    openMessageBox() {
      this.dialogVisible = true;
    },
    handleSubmit() {
      // 在这里处理表单提交逻辑，可以获取 this.formData 中的数据
      //console.log('表单数据：', this.formData);
      // 关闭弹窗
      this.dialogVisible = false;
      // 清空表单数据
      this.$refs.form.resetFields();
    },
    async get_box_and_instock() {
      await this.get_box(); // 等待get_box()完成
      await this.get_instock(); // 等待get_instock()完成
    },
    async get_box(){
      if (!this.box_input) {
        this.$message({
          message: '输入框不能为空！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      try {
        this.loading1 = true;
        const res = await this.$axios.get('/api/Box/InfoByGuid',{
          params:{
            boxGuid:this.box_input
          },
          headers:{
            'Accept': 'application/json',
            'Content-Type': "application/json;charset=UTF-8",
            'token':this.token
          }
        });
        console.log(res.data)
        if(res.data.code === 0)
        {
          this.boxdetail.boxCode = res.data.body.boxCode
          this.boxdetail.devCode = res.data.body.devCode
          this.boxdetail.devTypename = res.data.body.boxType.devTypeName
          this.boxdetail.boxCapacity = res.data.body.boxType.boxCapacity
          this.boxdetail.createTime = res.data.body.createTime
          this.boxdetail.description = res.data.body.remark
          this.boxdetail.boxId = res.data.body.boxId
          this.boxdetail.nowCapacity = res.data.body.devices["length"]
        }
        else if(res.data.code === -99)
        {
          this.$message({
            message: '登录已过期',
            type: 'error'
          });
          this.$router.push('/login');
        }
        else{
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
        this.loading1 = false;
      }catch (error) {
        console.error('Error while fetching box:', error);
      }
    },
    input_device(){
      if (!this.device_input) {
        this.$message({
          message: '输入框不能为空！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      if(!this.box_input)
      {
        this.$message({
          message: '请先输入箱号！',
          type: 'error'
        });
        return;
      }
      this.$axios.post(
          '/api/Instock/RecordByGuid',
          {
            boxId: this.boxdetail.boxId,
            devGuid: this.device_input
          },
          {
            headers: {
              'Accept': 'application/json',
              'Content-Type': "application/json;charset=UTF-8",
              'token': this.token
            }
          }
      ).then(res => {
            console.log(res.data)
            if (res.data.code === 0) {
              this.$message({
                message: '入库成功！',
                type: 'success'
              });
            }
            else if(res.data.code === -99)
            {
              this.$message({
                message: '登录已过期',
                type: 'error'
              });
              this.$router.push('/login');
            }
            else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              });
            }
          }
      ).catch(error => {
        // 处理请求错误
        console.error('发送 input_device 请求失败:', error);
      });
    },
    async get_instock()
    {
      if (!this.boxdetail.boxId) {
        this.$message({
          message: '请先获取箱子信息！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      try {
        this.loading2 = true;
        const res = await this.$axios.get('/api/Instock/ListByBoxId', {
          params: {
            boxId: this.boxdetail.boxId
          },
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json;charset=UTF-8',
            'token': this.token
          }
        });
        console.log(res.data);
        this.tableData = [];
        res.data.body.forEach(item => {
          let newData = {
            index: item.instockId,
            code: item.device.devCode,
            device: item.device.devGuid,
            time: item.instockTime,
            worker: item.user.userName,
            devId: item.device.devId
          };
          this.tableData.push(newData);
        });
      } catch (error) {
        console.error('Error while fetching instock:', error);
      }
      this.loading2 = false;
    },
    fetchDetailInfo(devId) {
      this.loading3 = true;
      // 发送 GET 请求，获取详细信息
      this.$axios.get('/api/Device/InfoById', {
        params: {
          devId: devId
        },
        headers:{
          'Accept': 'application/json',
          'Content-Type': "application/json;charset=UTF-8",
          'token':this.token
        }
      })
          .then(res => {
            // 处理响应数据
            console.log(res.data);
            this.device_detail.boxCode = this.ifboxCodeNull(res.data.body.box_Record);
            this.device_detail.user = res.data.body.user.userName;
            this.device_detail.devCode = res.data.body.devCode;
            this.device_detail.devGuid = res.data.body.devGuid;
            this.device_detail.devHardware = res.data.body.devHardware;
            this.device_detail.devSerialNumber = res.data.body.devSerialNumber;
            this.device_detail.devSoftware1 = res.data.body.devSoftware1;
            this.device_detail.devSoftware2 = res.data.body.devSoftware2;
            this.device_detail.mfgTime = res.data.body.mfgTime;
            this.device_detail.client = res.data.body.client;
            this.device_detail.workOrderCode = res.data.body.workOrderCode;
            this.device_detail.devState = res.data.body.devState;
            this.device_detail.saleCode = res.data.body.saleCode;
            this.device_detail.devType = res.data.body.devType.devTypeName;

            this.instock_list = [];
            res.data.body.instock.forEach(item => {
              let newData = {
                index: item.instockId,
                devCode: item.device.devCode,
                boxCode: item.box.boxCode,
                time: item.instockTime,
                worker: item.user.userName,
              };
              this.instock_list.push(newData);
            });
            this.outstock_list = [];
            res.data.body.outstock.forEach(item => {
              let newData = {
                index: item.outstockId,
                client: item.device.client,
                outstockTime: item.outstockTime,
                worker: item.user.userName,
              };
              this.outstock_list.push(newData);
            });
            this.retstock_list=[];
            res.data.body.retstock.forEach(item => {
              let newData = {
                index: item.retstockId,
                reason: item.retstockReason,
                time: item.retstockTime,
                worker: item.user.userName,
              };
              this.retstock_list.push(newData);
            });
            this.loading3 = false;
          })
          .catch(error => {
            console.error('获取详细信息失败:', error);
          });
    },
    getTagType(devState) {
      if (devState === 1) {
        return 'success';
      } else if (devState === 2) {
        return '';
      } else if (devState === 3) {
        return 'warning';
      } else if (devState === 4) {
        return 'danger';
      } else {
        return "";
      }
    },
    getTagLabel(devState){
      if (devState === 1) {
        return "生产完成";
      } else if (devState === 2) {
        return "入库";
      } else if (devState === 3) {
        return "出库";
      } else if (devState === 4) {
        return "报废";
      } else {
        return "未知状态";
      }
    },
    getColumnWidth(key) {
      // 返回不同列的宽度
      if (key === 'index') {
        return '50px'; // 设置boxCode列的宽度为150px
      }
    },
    ifnull(item){
      if(item==null)
      {
        return '-';
      }
      else
      {
        return item.boxCode;
      }
    },
    ifboxCodeNull(item){
      if(item==null)
      {
        return '-';
      }
      else
      {
        return item.boxCode;
      }
    },
  },
  created() {
    this.token = localStorage.getItem('token')
  }
};
</script>
<style  lang="less" scoped>
.list-card {
  .Registration_code {
    display: flex;
    align-items: center; /* 垂直居中 */
    .box_code {
      font-size: 14px;
      color: #999999;
      width: 20%; /* 设置 p 元素的宽度比例 */
      margin-right: 5px; /* 设置 p 元素和 input 元素之间的间距 */
    }
    .box_input {
      width:70%;
    }
  }
  .list {
    display: flex;
    justify-content: center; /* 居中显示 */
    margin-top: 10px;
  }
  .Device_code{
    display: flex;
    align-items: center; /* 垂直居中 */
    .dev_code {
      font-size: 14px;
      color: #999999;
      width: 20%; /* 设置 p 元素的宽度比例 */
      margin-right: 5px; /* 设置 p 元素和 input 元素之间的间距 */
    }
    .dev_input {
      width:70%;
    }
    .dev_button {
      margin-left: 10px;
    }
  }
}
.table_data{
  .device_head{
    margin-bottom: 10px;
  }
}
.data_detail {
  .detail{
    margin-top: 20px;
    .dt{
      .dt_tag{
        margin-left: 10px;
      }
    }
  }
  .tabs{
    margin-top: 20px;
  }
}
.my_content{
  margin-right: 20px;
}
.title::before {
  content: '设备履历表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //margin-left: 10px; /* 可以调整竖杠与标题的间距 */
}

.device_head::before {
  content: '设备列表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //margin-left: 10px; /* 可以调整竖杠与标题的间距 */
}
</style>